iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Mobile Development

[初探] 用 SwiftUI - 打造一個自助洗衣應用系列 第 10

第十日、SwiftUI - 介面按鈕 篇

  • 分享至 

  • xImage
  •  

今天來談到變化
包括顏色,包括圖形樣貌
這對介面設計來說是一件很重要的事情

首先是,顏色的部分

我們這邊簡單提到,對元件的顏色變化
你可以使用
.foregroundColor(Color.blue)
這裡是使用系統藍色的意思

這樣解釋很抽象
我們來看一下
以下的程式碼

    HStack {
            Text("Hello, World!")
            Image(systemName: "flag.fill")
        }
        .font(.title)
  • HStack 表示水平擺放裡面的元件
    https://ithelp.ithome.com.tw/upload/images/20200910/20130099XQ4ikaI0SC.png
    我們在Image後加上
    .foregroundColor(Color.blue)
    HStack {
            Text("Hello, World!")
            Image(systemName: "flag.fill")
            .foregroundColor(Color.blue)
        }
        .font(.title)

https://ithelp.ithome.com.tw/upload/images/20200910/20130099npzBAyGCH0.png

那如果我們換個地方:
如果是 HStack 後的話你就會得到
https://ithelp.ithome.com.tw/upload/images/20200910/20130099vU3ePatYE7.png

如果你想要藍色背景的話
我們再加長程式碼

        HStack {
            Text("Hello, World!")
            Image(systemName: "flag.fill")
            
        }
            .font(.title)
            .foregroundColor(Color.white)
            .background(Color.blue)
  • foregroundColor 讓他能白字
  • background 讓他能藍底
    https://ithelp.ithome.com.tw/upload/images/20200910/201300990GQ0rYta3f.png

即使這樣還是不夠吧!
我們在 font 前給個.padding()
https://ithelp.ithome.com.tw/upload/images/20200910/20130099VmR2wgVIUc.png

方方正正的我也不喜歡
再上個
.cornerRadius(30)
https://ithelp.ithome.com.tw/upload/images/20200910/20130099vIqMAzW7PP.png

最後得到

        HStack {
            Text("Hello, World!")
            Image(systemName: "flag.fill")   
        }   .padding()
            .font(.title)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .cornerRadius(30)

如果你想要用圖片按鈕的話

Button(action: {
            }) {
                Image(systemName: "flag.fill")
            }
            .padding()
            .font(.title)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .clipShape(Circle())
        }
  • clipShape 可以使用系統的圖形,這裡是設定圓形
    https://ithelp.ithome.com.tw/upload/images/20200910/20130099eNmF9LQ8E1.png

最後偷偷上個
.shadow(radius: 3)
https://ithelp.ithome.com.tw/upload/images/20200910/20130099mRlj46WI1a.png

今天就先到這邊,謝謝您的觀看/images/emoticon/emoticon41.gif


上一篇
第九日、SwiftUI - 元件(文字、圖片、按鈕) 篇
下一篇
第十一日、SwiftUI - 容納元件(堆疊) 篇
系列文
[初探] 用 SwiftUI - 打造一個自助洗衣應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言